﻿@{
    ViewData["Title"] = "学生上传";

}
@section Styles{
    <link href="~/assets/libs/jquery-upload/Huploadify.css" rel="stylesheet" type="text/css" />
    <link href="~/assets/libs/flatpickr/flatpickr.min.css" rel="stylesheet" type="text/css" />

    <link href="~/assets/libs/clockpicker/bootstrap-clockpicker.min.css" rel="stylesheet" type="text/css" />
    <link href="~/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
    <style>
        @@media (min-width: 576px) {
            .modal-dialog {
                max-width: 50% !important;
            }
        }
    </style>
}

<!-- Start Content-->
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">

                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="fa fa-map-marker-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">学生管理</a></li>
                        <li class="breadcrumb-item active">上传</li>
                    </ol>
                </div>
                <h4 class="page-title">上传</h4>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card-box">

                <form method="post" enctype="multipart/form-data" asp-controller="UploadFiles" asp-action="Upload" id="uploadform">
                    <div class="row  mt-2">
                        <div class="col-md-10">
                            <div class="form-inline">
                                <label class="control-label">选择一个包含学生数据的Excel   <span><a href="~/template/student.xlsx"> (点击这里下载Excel模板):</a></span></label><div id="upload"></div>
                            </div>
                        </div>
                    </div>
                </form>
                <hr />
                <button id="submit-btn" type="button" class="btn btn-primary  waves-effect waves-light float-right ladda-button" data-style="expand-left">
                    确定上传
                </button>
                <h4 class="header-title mb-2 mt-4">上传学生数据预览,默认密码：66666666</h4>

                <table class="table table-hover m-0 table-centered dt-responsive nowrap w-100" id="datatable">
                    <thead>
                        <tr>
                            <th width="1%"> </th>
                            <th width="10%">
                                登录账号
                            </th>
                            <th width="10%">姓名</th>
                            <th width="10%">手机</th>
                            <th width="10%">性别</th>
                            <th width="10%">生日</th>
                            <th width="10%">邮箱</th>
                            <th width="10%">地址</th>
                            <th width="10%">备注</th>
                            <th width="10%" class="hidden-sm"></th>
                        </tr>
                    </thead>
                    <tbody id="tbl-body">
                    </tbody>
                </table>
            </div>
        </div><!-- end col -->
    </div>
    <!--modal placeholder-->
    <div id="modalDefault" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">

            </div>
        </div>
    </div><!-- /.modal -->
</div>
@section Scripts{
    <script src="~/assets/libs/jquery-upload/jquery.Huploadify.js"></script>
    <script src="~/assets/libs/flatpickr/flatpickr.min.js"></script>
    <script src="~/assets/libs/flatpickr/zh.js"></script>
    <script src="~/assets/libs/clockpicker/bootstrap-clockpicker.min.js"></script>
    <script src="~/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    @await Html.PartialAsync("_ValidationScriptsPartial")

    <script>
        $(function () {

            $.get("/Student/GetUploadTemp").done(
                function (response) {

                    if (response.success) {
                        if (response.count > 0) {
                            $("#submit-btn").prop("disabled", false);
                        } else {
                            $("#submit-btn").prop("disabled", true);
                        }
                        $("#tbl-body").html(response.data);

                    }
                });

            $("#submit-btn").click(function () {

                $.ajax({
                    type: 'POST',
                    url: '/Student/SubmitUploadTemp',
                    data: { id: 1 },
                    contentType: 'application/json',
                    success: function (data) {
                        if (data.success) {

                            ShowMessage(data.message);
                            if (data.count > 0) {
                                $("#submit-btn").prop("disabled", false);
                            } else {
                                $("#submit-btn").prop("disabled", true);
                            }
                            $("#tbl-body").html(data.data);

                        } else {
                            ShowMessageError(data.message);
                        }
                    } 
                });



            });


            $('#upload').Huploadify({
                auto: true,
                fileTypeExts: '*.xlsx',
                multi: false,
                fileSizeLimit: 20480,
                showUploadedPercent: false,
                showUploadedSize: false,
                removeTimeout: 10000,
                uploader: '/Student/UploadTemp',
                onUploadStart: function (file) {
                },
                onInit: function (obj) {
                },
                onUploadComplete: function (file, res) {

                    var response = JSON.parse(res);

                    if (response.success) {
                        if (response.count > 0) {
                            $("#submit-btn").prop("disabled", false);
                        } else {
                            $("#submit-btn").prop("disabled", true);
                        }
                        $("#tbl-body").html(response.data);

                    }

                }
            });

        });
        function ShowPopup(url) {
            var modalId = 'modalDefault';
            var modalPlaceholder = $('#' + modalId + ' .modal-dialog .modal-content');
            $.get(url)
                .done(function (response) {
                    modalPlaceholder.html(response);
                    popup = $('#' + modalId + '').modal({
                        keyboard: false,
                        backdrop: 'static'
                    });
                }) ;
        }

        function SubmitForm(form, url) {
            $(form).removeData('validator');
            $(form).removeData('unobtrusiveValidation');
            $.validator.unobtrusive.parse(form);
            if ($(form).valid()) {
                var data = $(form).serializeJSON();
                data = JSON.stringify(data);

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: data,
                    contentType: 'application/json',
                    success: function (data) {
                        if (data.success) {
                            popup.modal('hide');
                            ShowMessage(data.message);
                            $("#tbl-body").html(data.data);

                        } else {
                            ShowMessageError(data.message);
                        }
                    } 
                });

            }
            return false;
        }

        function Remove(id) {

            Swal.fire({
                title: "删除",
                text: "确定删除?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#dd4b39",
                confirmButtonText: "是的，删除!",
                cancelButtonText: "取消",
                icon: "warning",
                buttons: true,
                dangerMode: true,

            }).then(function (willdelete) {
                console.log(willdelete);
                if (!willdelete.value) return;
                $.ajax({
                    type: 'POST',
                    url: '/Student/DeleteUploadTemp/' + id,
                    success: function (response) {
                        if (response.success) {
                            ShowMessage(response.message);
                            if (response.count > 0) {
                                $("#submit-btn").prop("disabled", false);
                            } else {
                                $("#submit-btn").prop("disabled", true);
                            }
                            $("#tbl-body").html(response.data);
                        } else {
                            ShowMessageError(response.message);
                        }
                    } 
                });
            });


        }
    </script>
}
